<div class="m-import-rpc" ref="rpc">
  <div class="m-rpc-list">
    <div class="tip">导入时，RPC 接口引用的数据模型，如果在当前项目中不存在，则它会被自动创建</div>
    <div class="tip">注意：如果有依赖的数据模型</div>
    {#if hasSameName}
    <div class="tip">有相同的接口，请选择其中一项导入</div>
    {/if}
    {#list rpcs as rpc}
    <div class="m-rpc-item {rpc.class}">
      <div class="item-header">
        <div class="item-checkbox" on-click={this.select(rpc_index)}>
          <i class="u-checkbox u-icon-checkbox-normal" r-class={{"f-dn":rpc.selected}}></i>
          <i class="u-checkbox u-icon-checkbox-pressed" r-class={{"f-dn":!rpc.selected}}></i>
        </div>
        <div class="item-name" on-click={this.select(rpc_index)}>{rpc.name}</div>
        <div class="item-toggle" on-click={this.toggle(rpc_index)}>
          <i title="展开详情" class="u-icon-spread-small-normal" r-class={{"f-dn":rpc.showPreview}}></i>
          <i title="收起详情" class="u-icon-fold-up-small-normal" r-class={{"f-dn":!rpc.showPreview}}></i>
        </div>
      </div>
      <div class="item-wrap" r-class={{"f-dn":!rpc.showPreview}}>
        <div class="item-row">
          <label>类名：</label>
          <div title="{rpc.className}">{rpc.className}</div>
        </div>
        <div class="item-row">
          <label>方法：</label>
          <div title="{rpc.path}">{rpc.path}</div>
        </div>
        <div class="item-row">
          <label>描述：</label>
          <div title="{rpc.description}">{rpc.description}</div>
        </div>
        <div class="item-row">
          <label>请求参数：</label>
          {#if !rpc.params.inputs.length}
          <div>无</div>
          {/if}
        </div>
        <div class="table-wrap" r-class={{"f-dn":!rpc.params.inputs.length}}>
          <div class="item-row table-header">
            <div title="名称">名称</div>
            <div title="类型">类型</div>
            <div title="描述">描述</div>
            <div title="默认值">默认值</div>
            <div title="是否必需">是否必需</div>
          </div>
          {#list rpc.params.inputs as param}
          <div class="item-row table-body">
            <div title={param.name}>{param.name}</div>
            <div {#if param.isArray}title="Array-{param.typeName}" {#else}title={param.typeName}{/if}>{#if
              param.isArray}Array-{/if}{param.typeName}
            </div>
            <div title={param.description}>{param.description}</div>
            <div title={param.defaultValue}>{param.defaultValue}</div>
            <div title={param.required}>{param.required?"是":"否"}</div>
          </div>
          {/list}
        </div>
        <div class="item-row">
          <label>响应参数：</label>
          {#if !rpc.params.outputs.length}
          <div>无</div>
          {/if}
        </div>
        <div class="table-wrap" r-class={{"f-dn":!rpc.params.outputs.length}}>
          <div class="item-row table-header">
            <div title="名称">名称</div>
            <div title="类型">类型</div>
            <div title="描述">描述</div>
            <div title="默认值">默认值</div>
            <div title="是否必需">是否必需</div>
          </div>
          {#list rpc.params.outputs as param}
          <div class="item-row table-body">
            {#if param.datatypeName}
            <div title={param.name}>导入了数据模型 {param.datatypeName}</div>
            {#else}
            <div title={param.name}>{param.name}</div>
            <div {#if param.isArray}title="Array-{param.typeName}" {#else}title={param.typeName}{/if}>
              {#if param.isArray}Array-{/if}{param.typeName}
            </div>
            <div title={param.description}>{param.description}</div>
            <div title={param.defaultValue}>{param.defaultValue}</div>
            <div title={param.required}>{param.required?"是":"否"}</div>
            {/if}
          </div>
          {/list}
        </div>
      </div>
    </div>
    {/list}
  </div>
  <div class="m-rpc-group">
    <label>分组：</label>
    <select2 source={groups} on-change={this.setGroup($event)}></select2>
  </div>
  <div class="m-rpc-tag">
    <label>标签：</label>
    <div class="tags" ref="tags"></div>
  </div>
  <div class="m-rpc-more">
    <i class="u-icon-more-editor-normal normal"></i><i class="u-icon-more-editor-hover hover"></i><i
    class="u-icon-more-editor-pressed pressed"></i>
    <div class="menu-wrap">
      <ul>
        <li on-click={this.showImport(0,'rpc')}>导入 RPC 文件</li>
        <li r-class={{"f-dn":!isChrome}} on-click={this.showImport(2,'rpc')}>导入 RPC 文件夹</li>
        <li on-click={this.showImport(0,'json')}>导入 JSON 文件</li>
      </ul>
    </div>
  </div>
  <input type="file" class="j-file f-dn" multiple ref=fileInput on-change={this.import($event)}/>
  <input type="file" class="j-dir f-dn" webkitdirectory ref=dirInput on-change={this.import($event)}/>
</div>
